<template>
   <!-- 报名筑功者 -->
    <div class="register-zgz">
        <div class="register-zgz-hd">
            <p>报名筑功者</p>
            <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
                <div class="register-item" v-for="(item,index) in getJoinedMemberList" :key=index>
                    <div class="register-item-01">
                        <span>{{item.Name}}</span>
                        <div><span class="register-time-01">报名时间:</span><span class="register-time-012">{{item.Addtime}}</span></div>
                    </div>
                    <div class="register-item-02">
                        <dl class="register-dl">
                            <dt class="register-dt"><img :src="item.Headportrait" class="register-item-00"/></dt>
                            <dd class="register-dd">
                                <p>总完成:<span class="register-item-1">{{item.CompleteCount}}个</span></p>
                                <p >好评率:<span class="register-item-1">{{item.FavorableRate}} %</span></p>
                            </dd>
                        </dl>
                       <div v-if="item.Statu==3">
                          <span class="fenge"></span>
                          <img src="~@/assets/hire.png" class="hire"/>
                       </div>
                    </div>
                </div>
            </div>
      </div>
      <div v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </div>
      <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
    </div>
</template>

<script>
import { JoinedMember } from "@/api/projects";
export default {
  name: "tab-first",
  data() {
    return {
      getJoinedMemberList: {},
      pageIndex: 1,
      loading: false, //是否显示加载中
      allLoaded: false, //加载完毕
      totalpage: 0 //总页码
    };
  },
  props: {
    id: Number
  },
  created() {
    this._getJoinedMemberList();
  },
  methods: {
    // 获取数据
    _getJoinedMemberList() {
      this.$indicator.open();
      setTimeout(() => {
        JoinedMember(this.id, this.pageIndex).then(res => {
          if (res.StatusCode === 200) {
            this.getJoinedMemberList = res.Data;
            this.totalpage = res.TotalPage;
            if (!res.Data.items) {
              this.dataLength = 0;
            } else {
              this.dataLength = JSON.stringify(res.Data.items.length);
            }
            this.$indicator.close();
          }
        });
      }, 400);
    },
    loadMore() {
      //分页加载更多
      if (this.pageIndex >= this.totalpage) {
        this.allLoaded = true;
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.pageIndex++;
        JoinedMember(this.id, this.pageIndex).then(res => {
          if (res.StatusCode === 200) {
            this.getJoinedMemberList = this.getJoinedMemberList.concat(
              res.Data
            );
          }
        });
        this.loading = false;
      }, 1000);
    }
  }
};
</script>

<style scoped lang="scss">
/* 报名筑功者 */
.register-zgz {
  padding-top: 10px;
  padding-bottom: 10px;
}
.register-zgz-hd {
  width: 94%;
  margin: 0 auto;
  
}
.register-zgz-hd > p {
  height: 26.6px;
  font-size: 16px;
  color: #666666;
  font-weight: bolder;
  border-bottom: 1px solid #f4f4f4;
}
.register-item {
  margin-top: 16.5px;
}
.register-item-01 {
  width: 100%;
  height: 29.3px;
  background: #eeeeee;
  font-size: 14px;
  font-weight: bolder;
  color: #282828;
  line-height: 29.3px;
  padding: 0 10px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.register-time-01 {
  display: inline-block;
  margin-right: 3px;
  color: #999999;
  font-weight: normal;
}
.register-time-012 {
  display: inline-block;
  color: #999999;
  font-weight: normal;
}

/* 修改下左右边框的颜色 */
.register-item-02 {
  color: #999999;
  border: 1px solid #f4f4f4;
  border-top: none;
  position: relative;
  padding: 13px 0;
}
.register-dl {
  overflow: hidden;
}
.register-dt {
  margin-left: 8.5px;
}
.register-dd {
  float: left;
  font-size: 14px;
  font-weight: 100;
  color: #999999;
  margin-left: 12px;
}
.register-dd > p {
  margin-top: 4px;
}

.register-dt {
  float: left;
}
.register-item-00 {
  width: 41.6px;
  height: 41.6px;
  display: inline-block;
  margin-top: 4px;
}
.register-item-1 {
  color: #333333;
  margin-top: 10px;
  margin-left: 3px;
}

.fenge {
  position: absolute;
  width: 0px;
  height: 37.3px;
  border-left: 1px solid #dcdcdc;
  left: 59%;
  top: 19px;
}
.hire {
  width: 48px;
  height: 27px;
  position: absolute;
  right: 60px;
  top: 23px;
}
/* 到底啦 */
.to-footer {
  background: #f4f4f4;
  height: 199px;
  line-height: 42px;
  text-align: center;
  color: #999999;
}
</style>
